<template>
  <view class="selectGender allColumnCenter">
    <view class="bag">
      <img class="bag_image" src="/static/shiqin-images/01.png" mode="widthFix">
    </view>
    <header-title title="选择性别"></header-title>
    <view class="tips mt-131 z-1">
      <text class="tips_overText">您的性别</text>
    </view>
    <view class="tips mt-18 z-1">
      <text class="tips_littleText">选择完成后性别将不可更改</text>
    </view>
    <view class="selectGender_content rowSpaceAround z-1">
      <view class="selectGender_content_list allColumnCenter mt-73" v-for="(item,index) in genderList" :key="index"
            @click="selectList(item.sex)">
        <image-avater :isOrder="true" :width="160" :height="160" :border-width="8" :src="item.imageSrc"
                      :border-color="checkIndex == item.sex ? '#FF4206':'#FFFFFF'"></image-avater>
        <view class="character">
          <text class="character_text" :style="{
            color: checkIndex == item.sex ? '#FF4206':'#4B4B4B',
          }">{{ item.name }}
          </text>
        </view>
      </view>
    </view>
    <view class="selectGender_btn allRowCenter z-1 mt-189" @click.stop="goToPath">
      <text class="selectGender_btn_text z-1">下一步</text>
    </view>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import ImageAvater from "../../components/shiqinComponents/pageComponents/imageAvater.vue";
import {getSexAvatar} from "../../api/shiqinAPI";

export default {
  name: "selectGender",
  components: {ImageAvater, HeaderTitle},
  data() {
    return {
      checkIndex: -1,
      genderList: [
        {
          imageSrc: '/static/shiqin-images/man.png',
          name: '男',
          sex: 1
        },
        {
          imageSrc: '/static/shiqin-images/woman.png',
          name: '女',
          sex: 2
        }
      ]
    }
  },
  onLoad() {
    this.getDefaultGender()
  },
  methods: {
    selectList(index) {
      this.checkIndex = index
    },
    goToPath() {
      if (this.checkIndex == -1) {
        uni.showToast({
          title: '请点击头像选择您的性别',
          icon: 'none',
          duration:2500
        })
        return
      }
      this.$nav.navigateTo('/pages/loginType/basicInformation', {
        sex: this.checkIndex
      })
    },
    // 获取默认性别头像
    getDefaultGender() {
      getSexAvatar().then(res => {
        this.genderList[0].imageSrc = res.data.male
        this.genderList[1].imageSrc = res.data.woman
      })
    }
  }
}
</script>

<style scoped lang="scss">
.selectGender {
  width: 750rpx;
  min-height: 100vh;
  overflow: hidden;
  background: #F5F5F5;

  .bag {
    width: 750rpx;
    position: absolute;
    top: 0;
    left: 0;

    .bag_image {
      width: 750rpx;
    }
  }

  .tips {
    width: 660rpx;
    z-index: 1;

    &_overText {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 48rpx;
      color: #000000;
    }

    &_littleText {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #4B4B4B;
    }
  }

  .selectGender_content {
    width: 750rpx;
    z-index: 1;

    .selectGender_content_list {
      .character {
        &_text {
          font-weight: 500;
          font-size: 38rpx;
          color: #FF4206;
        }
      }
    }
  }

  .selectGender_btn {
    width: 362rpx;
    height: 100rpx;
    background: #FF4206;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    z-index: 1;

    .selectGender_btn_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
}
</style>